<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>添加随访记录</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/css/style.css" rel="stylesheet">
</head>
<body class="bg-gradient-to-br from-blue-50 to-indigo-50 min-vh-100 d-flex flex-column">
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm">
        <div class="container">
            <a class="navbar-brand d-flex align-items-center" href="/">
                <img src="/static/images/logo.png" alt="Logo" class="rounded-circle me-2" width="40" height="40">
                <span class="font-bold text-primary">眼底随访系统</span>
            </a>
            <div class="navbar-nav ms-auto">
                <span class="nav-item nav-link">欢迎，{{ current_user.username }}！</span>
                {% if is_admin %}
                <a class="nav-item nav-link" href="/admin/logout">退出</a>
                {% else %}
                <a class="nav-item nav-link" href="/logout">退出</a>
                {% endif %}
            </div>
        </div>
    </nav>

    <!-- 主要内容 -->
    <main class="flex-grow-1 container my-5">
        <div class="card w-100 max-w-4xl mx-auto p-6 shadow-lg rounded-xl fade-up" style="animation-delay: 0.1s">
            <h2 class="mb-6 text-center text-xl font-bold text-primary">添加随访记录</h2>
            <form method="post" action="/add_record" enctype="multipart/form-data">
                <div class="mb-4 fade-up" style="animation-delay: 0.2s">
                    <label for="patient_name" class="form-label">患者姓名</label>
                    <input type="text" class="form-control rounded-lg border-gray-300 focus:border-primary focus:ring-2 focus:ring-primary/20" id="patient_name" name="patient_name" required>
                </div>
                <div class="mb-4 fade-up" style="animation-delay: 0.3s">
                    <label for="doctor_name" class="form-label">医生姓名</label>
                    {% if is_admin %}
                    <input type="text" class="form-control rounded-lg border-gray-300 focus:border-primary focus:ring-2 focus:ring-primary/20" id="doctor_name" name="doctor_name" required>
                    {% else %}
                    <input type="text" class="form-control rounded-lg border-gray-300 focus:border-primary focus:ring-2 focus:ring-primary/20" id="doctor_name" name="doctor_name" value="{{ current_user.username }}" readonly required>
                    {% endif %}
                </div>

                <h4 class="mt-6 mb-3 text-lg font-semibold text-gray-700 fade-up" style="animation-delay: 0.4s">诊断信息</h4>
                <div id="diagnoses_container" class="fade-up" style="animation-delay: 0.5s">
                    <!-- 初始诊断项 -->
                    <div class="diagnosis_item mb-4 p-4 border border-gray-200 rounded-lg bg-white shadow-sm">
                        <div class="mb-3">
                            <label for="diagnosis_name_0" class="form-label">诊断名称 1</label>
                            <select class="form-select rounded-lg border-gray-300 focus:border-primary focus:ring-2 focus:ring-primary/20" id="diagnosis_name_0" name="diagnosis_name_0" required>
                                <option value="糖尿病">糖尿病</option>
                                <option value="青光眼">青光眼</option>
                                <option value="白内障">白内障</option>
                                <option value="AMD">AMD</option>
                                <option value="高血压">高血压</option>
                                <option value="近视">近视</option>
                                <option value="其他疾病/异常">其他疾病/异常</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="diagnosis_risk_0" class="form-label">风险等级 1</label>
                            <select class="form-select rounded-lg border-gray-300 focus:border-primary focus:ring-2 focus:ring-primary/20" id="diagnosis_risk_0" name="diagnosis_risk_0" required>
                                <option value="高危">高危</option>
                                <option value="中危">中危</option>
                                <option value="低危">低危</option>
                            </select>
                        </div>
                    </div>
                </div>
                <button type="button" id="add_diagnosis" class="btn btn-outline-primary rounded-full px-4 py-2 mb-6 hover:shadow-md transition-all duration-300 fade-up" style="animation-delay: 0.6s">添加更多诊断</button>

                <div class="mb-4 fade-up" style="animation-delay: 0.7s">
                    <label for="advice_deepseek" class="form-label">DeepSeek 诊断建议</label>
                    <textarea class="form-control rounded-lg border-gray-300 focus:border-primary focus:ring-2 focus:ring-primary/20" id="advice_deepseek" name="advice_deepseek" rows="4" placeholder="输入DeepSeek提供的诊断建议"></textarea>
                </div>
                <div class="mb-4 fade-up" style="animation-delay: 0.8s">
                    <label for="advice_huatuo" class="form-label">华佗模型诊断建议</label>
                    <textarea class="form-control rounded-lg border-gray-300 focus:border-primary focus:ring-2 focus:ring-primary/20" id="advice_huatuo" name="advice_huatuo" rows="4" placeholder="输入华佗模型提供的诊断建议"></textarea>
                </div>
                <div class="mb-4 fade-up" style="animation-delay: 0.9s">
                    <label for="left_eye_image" class="form-label">左眼图片</label>
                    <input type="file" class="form-control rounded-lg border-gray-300 focus:border-primary focus:ring-2 focus:ring-primary/20" id="left_eye_image" name="left_eye_image" accept="image/*">
                </div>
                <div class="mb-4 fade-up" style="animation-delay: 1.0s">
                    <label for="right_eye_image" class="form-label">右眼图片</label>
                    <input type="file" class="form-control rounded-lg border-gray-300 focus:border-primary focus:ring-2 focus:ring-primary/20" id="right_eye_image" name="right_eye_image" accept="image/*">
                </div>

                <div class="d-flex justify-center gap-3 mt-6 fade-up" style="animation-delay: 1.1s">
                    <button type="submit" class="btn btn-primary rounded-full px-6 py-2 hover:shadow-lg transition-all duration-300">提交</button>
                    {% if is_admin %}
                    <a href="/admin/dashboard" class="btn btn-outline-secondary rounded-full px-6 py-2 hover:shadow-md transition-all duration-300">取消</a>
                    {% else %}
                    <a href="/dashboard" class="btn btn-outline-secondary rounded-full px-6 py-2 hover:shadow-md transition-all duration-300">取消</a>
                    {% endif %}
                </div>
            </form>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-white py-4 shadow-inner">
        <div class="container text-center text-gray-600">
            <p>© 2025 眼底随访系统. 保留所有权利.</p>
        </div>
    </footer>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 添加更多疾病按钮点击事件
            document.getElementById('add_diagnosis').addEventListener('click', function() {
                const container = document.getElementById('diagnoses_container');
                const index = container.children.length;
                const delay = 0.5 + index * 0.1;
                
                const newDiagnosis = document.createElement('div');
                newDiagnosis.className = 'diagnosis_item mb-4 p-4 border border-gray-200 rounded-lg bg-white shadow-sm fade-up';
                newDiagnosis.style.animationDelay = delay + 's';
                newDiagnosis.innerHTML = `
                    <div class="mb-3">
                        <label class="form-label">诊断名称 ${index + 1}</label>
                        <select class="form-select rounded-lg border-gray-300 focus:border-primary focus:ring-2 focus:ring-primary/20" name="diagnosis_name_${index}" required>
                            <option value="糖尿病">糖尿病</option>
                            <option value="青光眼">青光眼</option>
                            <option value="白内障">白内障</option>
                            <option value="AMD">AMD</option>
                            <option value="高血压">高血压</option>
                            <option value="近视">近视</option>
                            <option value="其他疾病/异常">其他疾病/异常</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">风险等级 ${index + 1}</label>
                        <select class="form-select rounded-lg border-gray-300 focus:border-primary focus:ring-2 focus:ring-primary/20" name="diagnosis_risk_${index}" required>
                            <option value="高危">高危</option>
                            <option value="中危">中危</option>
                            <option value="低危">低危</option>
                        </select>
                    </div>
                    <button type="button" class="btn btn-danger btn-sm rounded-full px-4 py-1 remove_diagnosis">移除</button>
                `;
                
                container.appendChild(newDiagnosis);
                
                // 添加移除按钮事件
                newDiagnosis.querySelector('.remove_diagnosis').addEventListener('click', function() {
                    container.removeChild(newDiagnosis);
                });
            });
        });
    </script>
</body>
</html>